<template>
<div class="fillContainer">
   
    <el-form :inline="true" ref="add_data">
             <!-- 根据日期筛选数据 -->
        <el-form-item label="按照时间筛选：">
            <el-date-picker
                v-model="search_data.startTime"
                type="datetime"
                placeholder="选择开始时间"
                >
            </el-date-picker>
            --
            <el-date-picker
                v-model="search_data.endTime"
                type="datetime"
                placeholder="选择结束时间"
                >
            </el-date-picker>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" size="small" icon="search" @click="handleSearch()">筛选</el-button>
    </el-form-item>
    <!-- 添加按钮 -->
    <el-form-item class="btnRight">
        <el-button 
            type="primary"
            size="small" 
            icon="view" 
            v-if="user.identity == 'manager'"
            @click="handleAdd()">添加
        </el-button>
    </el-form-item>
    </el-form>
    <!-- 表格开始 -->
    <div class="table_container" >
        <el-table
            v-if="tableData.length > 0"
            :data="tableData"
            max-height="450"
            border
            style="width: 100%">
            <el-table-column
            type="index"
            label="序号"
            align="center"
            width="70">
            </el-table-column>
            <el-table-column
            prop="date"
            label="创建时间"
            align="center"
            width="250">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="收支类型"
                align="center"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="describe"
                label="收支描述"
                align="center"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="income"
                label="收入"
                align="center"
                width="170">
            <template slot-scope="scope">
                <span style="color:#00d053">{{ scope.row.income }}</span>
            </template>
            </el-table-column>
            <el-table-column
                prop="expend"
                label="支出"
                align="center"
                width="170"
            >
                <template slot-scope="scope">
                    <span style="color:red">{{ scope.row.expend }}</span>
                </template>
                </el-table-column>

                <el-table-column
                    prop="cash"
                    label="账户现金"
                    align="center"
                    width="170"
                    >
                <template slot-scope="scope">
                    <span style="color:#4db3ff">{{ scope.row.cash }}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="220"
                >
            </el-table-column>
            <el-table-column 
                porp="operation"
                align="center"
                label="操作"
                fixed="right"
                width="180"
                v-if="user.identity == 'manager'">
            <template slot-scope="scope">
                <el-button
                type="warning"
                size="small"
                icon="edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                type="danger"
                size="small"
                icon="delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="paginations.page_index"
                        :page-sizes="paginations.page_sizes"
                        :page-size="paginations.page_size"
                        :layout="paginations.layout"
                        :total="paginations.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- <div class="meishuj" >没有数据</div> -->
    <!-- 表格结束 -->
    <Dialog :dialog="dialog" :formData="formData" @update="getProfile"></Dialog>
</div>
</template>
<script>
import Dialog from '@/components/Dialog'
export default {
    name:'fundList',
    components:{
        Dialog
    },
    //计算属性
    computed:{
        //用户权限管理
        user(){
            return this.$store.getters.user;
        }
    },
    data(){
        return{
            //根据时间筛选
            search_data:{
                startTime:'',
                endTime:''
            },
            //筛选过滤容器
            filterTableData:[],
            //分页数据页数过滤容器
            allTableData:[],
            //分页
            paginations:{
                page_index:1,//当前位于哪页
                total:0, //总数
                page_size:5,//1页显示多少条
                page_sizes:[5, 10, 15, 20], //每页显示多少条
                layout:'total, sizes, prev, pager, next, jumper',//翻页属性
            },
            //定义数据
            formData:{
                type:'',
                describe:'',
                income:'',
                expend:'',
                cash:'',
                remark:'',
                id:''
            },
            tableData:[],
            //弹框显示隐藏
            dialog:{
                show:false,
                title:'默认值',
                option:'edit'
            }
        }
    },
    //生命周期函数 加载后
    created(){
        this.getProfile();
    },
    methods:{
        //获取表格数据
        getProfile(){
            this.$axios.get('/api/profiles')
            .then(res =>{
                //赋值给  data中的 tableData 
                //this.tableData = res.data;
                //分页过滤后的数据
                this.allTableData = res.data;
                //获取时间筛选过的数据
                this.filterTableData = res.data;
                //设置分页数据
                this.setPageinations();
            })
            .catch(err => console.log(err))
        },
        //设置分页数据
        setPageinations(){
            this.paginations.total = this.allTableData.length;
            this.paginations.page_index = 1;//当前位于哪页
            this.paginations.page_size = 5; //一页显示多少条
            //设置默认的分页数据
            this.tableData = this.allTableData.filter((item, index) =>{
                return index < this.paginations.page_size;
            })
        },
        //编辑
        handleEdit(index, row){
           this.dialog ={
            show:true,
            title:'修改资金信息',
            message:'数据修改成功！',
            option:'edit'
           },
           //获取数据
           this.formData ={
            type: row.type,
            describe: row.describe,
            income: row.income,
            expend: row.expend,
            cash: row.cash,
            remark: row.remark,
            id: row._id
           }
        },
         //删除
        handleDelete(index, row){
             this.$axios.delete(`/api/profiles/delete/${row._id}`).then(res =>{
                this.$message('删除成功！');
                //然后调用方法刷新页面
                this.getProfile();
  
             })
        },
        //添加
        handleAdd(){
            this.dialog ={
                show:true,
                title:'添加资金信息',
                message:'数据添加成功！',
                option:'add'
            },
            //数据
            this.formData = {
                type: '',
                describe: '',
                income: '',
                expend: '',
                cash:'',
                remark:'',
                id: '',
            }
            //弹框显示影藏
            this.dialog.show = true
        },
        //改变当前页面页数
        handleSizeChange(page_size){
            //切换size
            this.paginations.page_index = 1;//当前位于哪页
            this.paginations.page_size = page_size;//一页显示多少条
            this.tableData = this.allTableData.filter((item, index) =>{
                return index < page_size
            })

        },

        handleCurrentChange(page){
            //获取当前页
            let index = this.paginations.page_size *(page - 1);
            //数据的总数
            let nums = this.paginations.page_size * page;
            //容器
            let tables =[];

            for(let i = index;i < nums; i++){
                if(this.allTableData[i]){
                    tables.push(this.allTableData[i]);
                }
                this.tableData = tables;
            }
        },
        //筛选按钮
        handleSearch(){
            //两个为空都不进行筛选
            if(!this.search_data.startTime || !this.search_data.endTime){
                this.$message({
                    type:"warning",
                    message:'请选择时间区间'
                });
                //都选返回数据给他
                this.getProfile();
                return
            }
            //获取开始和结束时间
            const sTime = this.search_data.startTime.getTime();
            const eTime = this.search_data.endTime.getTime();

            this.allTableData = this.filterTableData.filter(item =>{
                //初始化时间
                let date = new Date(item.date);
                let time = date.getTime();
                //开始时间大于等于开始时间 并且 开始时间小于等于结束时间
                return time >= sTime && time <= eTime;
            })
            //最后在调用 分页数据
            this.setPageinations();
        }

    }
}
</script>
<style scoped>
.fillContainer{
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.btnRight{
    float: right;
}
.pagination{
    text-align: right;
    margin-top: 10px;
}
</style>